<template>
  <!-- 跳骚市场 -->
  <el-card>
    <el-row :gutter="20">
      <el-form inline>
        <el-form-item>
          <el-button :span="6" size="medium" type="success">批量导出</el-button>
          <el-button :span="6" type="danger" size="medium">批量删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入商品名" />
        </el-form-item>
        <el-form-item label="发布人">
          <el-select v-model="formInline.region" placeholder="请选择发布人">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属小区">
          <el-select v-model="formInline.region" placeholder="请选择所属小区">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="formInline.region" placeholder="请选择类型">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否售出">
          <el-select v-model="formInline.region" placeholder="请选择是否售出">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- table内容 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width:100%"
      size="medium"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
      />

      <el-table-column
        show-overflow-tooltip

        height="90"
        label="品名"

        prop="name"
        header-align="center"
      />

      <el-table-column
        prop="content"
        show-overflow-tooltip
        label="内容"

        header-align="center"
        height="90"
      />
      <el-table-column
        prop="address"
        label="发布人"

        header-align="center"
      />
      <el-table-column
        prop="address"
        label="所属小区"

        header-align="center"
      />
      <el-table-column
        prop="address"
        label="所属类别"

        header-align="center"
      /><el-table-column
        prop="address"
        label="预览"

        header-align="center"
      /><el-table-column
        prop="address"
        label="联系电话"

        header-align="center"
      /><el-table-column
        prop="address"
        label="收藏数"

        header-align="center"
      /><el-table-column
        prop="address"
        label="状态"

        header-align="center"
      /><el-table-column
        prop="address"
        label="是否售出"

        header-align="center"
      /><el-table-column
        prop="address"
        label="价格"

        header-align="center"
      /><el-table-column
        prop="address"
        label="地址"

        header-align="center"
      /><el-table-column
        prop="address"
        label="创建时间"

        header-align="center"
      >
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column

        label="操作"

        header-align="center"
      >
        <template>
          <el-button
            size="mini"
            type="warning"
            @click="dialogFormVisible=true"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete()"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">

      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[5, 10, 50, 100, 200]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="修改跳蚤市场商品" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="120px" style="width: 80%">
        <el-form-item label="发布人姓名" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属小区" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品类别" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="品名" :label-width="formLabelWidth">
          <el-input placeholder="请输入品名" clearable />
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input placeholder="请输入内容" clearable />
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input placeholder="请输入价格" clearable />
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input placeholder="请输入地址" clearable />
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input placeholder="请输入联系电话" clearable />
        </el-form-item>
        <el-form-item label="预览图" prop="thumbnail">
          <div class="avatar-uploader">
            <img :src="srcList" class="avatar" name="file">
          </div>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group>
            <el-radio label="0">待审核</el-radio>
            <el-radio label="1">审核通过</el-radio>
            <el-radio label="2">下架</el-radio>
            <el-radio label="3">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否售出">
          <el-radio-group>
            <el-radio label="0">未售出</el-radio>
            <el-radio label="1">已售出</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </el-card>

</template>

<script>

export default {
  data() {
    return {

      dialogFormVisible: false,
      zdx: 1,
      formLabelWidth: '220px',
      url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'

      ],
      formInline: {
        user: '',
        region: ''
      },
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '小历'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false,

      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },

      // table 数据
      tableData: [{
        date: '2016-05-03',
        name: '戴尔(DELL)游匣G',
        address: '上海市普陀区金沙江路 1518 弄',
        content: '购机送：双肩包+游戏键鼠套装+鼠标垫'
      }, {
        date: '2016-05-02',
        name: '戴尔(DELL)游匣G',
        address: '上海市普陀区',
        content: '购机送：双肩包+游戏键鼠套装+鼠标垫'

      }, {
        date: '2016-05-04',
        name: '戴尔(DELL)游匣G',
        address: '上海市普陀区金沙江路 1518 弄',
        content: '购机送：双肩包+游戏键鼠套装+鼠标垫'

      }, {
        date: '2016-05-01',
        name: '戴尔(DELL)游匣G',
        address: '上海市普陀区金沙江路 1518 弄',
        content: '购机送：双肩包+游戏键鼠套装+鼠标垫'

      }, {
        date: '2016-05-08',
        name: '戴尔(DELL)游匣G',
        address: '上海市普陀区金沙江路 1518 弄',
        content: '购机送：双肩包+游戏键鼠套装+鼠标垫'

      }, {
        date: '2016-05-06',
        name: '戴尔(DELL)游匣G',
        address: '上海市普陀区金沙江路 1518 弄',
        content: '购机送：双肩包+游戏键鼠套装+鼠标垫'

      }, {
        date: '2016-05-07',
        name: '戴尔(DELL)游匣G',
        address: '上海市普陀区金沙江路 1518 弄',
        content: '购机送：双肩包+游戏键鼠套装+鼠标垫'

      }],
      multipleSelection: []
    }
  },

  methods: {
    // 获取商品类型
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //  调整每页条数时触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 跳转页时触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleDelete() {
      this.$confirm('确认删除吗?')
        .then(_ => {
          this.$message.success('删除完成')
        })
        .catch(_ => {})
    }
  }
}
</script>

<style lang="scss">
.xstsitem{
  margin: 4px;
}
.avatar-uploader {
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;
  cursor: pointer;
}
.avatar {
  width: 128px;
  height: 135px;
  border-radius: 6px;
  margin-top: 20px;
}

</style>>

